<template>
	<view class="contont">
		<!-- 视屏 -->
		<view class="header-video">
			<video
				id="myVideo" 
				initial-time="1" 
				class="video" 
				:src="videoPath" 
				direction="0"
				page-gesture="true"
				enable-play-gesture="true"
				object-fit='cover' 
				webkit-playsinline 
				playsinline 
				x5-playsinline
				autoplay="true"
			>
			<cover-image class="controls-back" @click="imgBack" :style="{top:statuHeightBack+'px'}" src="/static/home/back.png"></cover-image>
			<cover-image class="controls-share" :style="{top:statuHeight+'px'}" @click="clickSearc" src="/static/home/share.png"></cover-image>
			</video>
		</view>
		<!-- 选项卡 -->
		<view class="tabs-box">
			<ms-tabs :list="tabList" v-model="active" itemColor='#A912E7' lineColor='#A912E7' @input="tabsClick"/>
		</view>
		<!-- 主体内容 -->
		<!-- <view class="main"> -->
			<scroll-view class="main-scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
			<!-- 视频剧情 -->
			<view>
				<view>
					<!-- 视频内容介绍 -->
					<view class="conter-duction-header" id="conter-duction">
						<view class="content-duction">
							<view class="content-duction-title">{{userFrom.title}}</view>
						<!-- 	<view class="item-conten">{{userFrom.fansCount}}</view> -->
						</view>
						<view class="attention-bean">
							<view class="item-user">
								<view class="img-box">
									<image class="img" :src="userFrom.url" mode="aspectFit" v-if="userFrom.url"></image>
									<image class="img" src="@/static/home/celebrity.jpeg" mode="aspectFit" v-else></image>
								</view>
								<view class="name-bean">
									<view class="user-name">{{userFrom.nick}}</view>
									<view class="bean">粉丝{{fansCount}}</view>
								</view>
							</view>
							<view class="attention-ta" v-if="isAttenStatus" @click="cancelFollow" style="background: #999999;">已关注</view>
							<view class="attention-ta" @click="attention" v-else>关注Ta</view>
						</view>
					</view>
					<view style="height: 20rpx;background: #F2F2F2;"></view>
					<!-- 影视图片与描述 -->
					<view class="films-img-describe">
						<view class="title-icon">
							<view class="icon"></view>
							<view class="item-text">{{userFrom.title}}</view>
						</view>
						<view class="title-contont-img">
							<view class="title-contont">{{userFrom.frontStr}}</view>
							<view class="img-box">
								<image  v-for="(item,index) in vpraiseCountImg" :src="item.imgUrl" :key="item.id"
								 align="right" class="img" mode="aspectFill" v-if="CountImgIndex || index<1"></image>
							</view>
							<view class="title-contont">{{userFrom.laterStr}}</view>
						</view>
						<view class="unfold" @click="CountImgIndex = !CountImgIndex">展开更多</view>
					</view>
				</view>
				<view style="height: 20rpx;background: #F2F2F2;"></view>
				<!-- 全部评论 -->
				<view>
					<view class="discuss-title" id="comment">全部评论</view>
					<view class="all-comment-list">
						<view class="comment-box" v-for="(item,index) in commentList" :key="index">
							<view class="user-portrait-name">
								<view class="item-img-name">
									<image :src="item.imgUrl" class="img" mode="aspectFill"></image>
									<view class="user-name">{{item.nick}}</view>
								</view>
								<view class="time">{{ item.createTime }}</view>
							</view>
							<view class="comment-text">{{item.content}}</view>
							<view class="icon-num">
								<view class="iconfont" :style="{color: item.giveStatus ? '#F04B2A' : ''}" @click="clickGive(item.id,item.giveStatus)">&#xe64c;</view>
								<view class="num">{{item.praseCount}}</view>
							</view>
						</view>
					</view>
					<view class="load-more" @click="clickLoad" v-if="commentArr.length > 10 || commentArr.length == 10">加载更多</view>
					<view class="load-more" @click="clickLoad" v-else style="color: #999999;">没有更多数据了</view>
				</view>
				<view style="height: 20rpx;background: #F2F2F2;"></view>
				<!-- 相关推荐 -->
				<view class="equal-induce">
					<view class="equal-title" id="equa">相关推荐</view>
					<view class="img-text-play" v-for="(item,index) in equalList" :key="item.id" v-if="(index<3)" @click="videoDetail(item.furl,item.vid)">
						<view class="equal-img">
							<image :src="item.fcoverUrl" mode="aspectFill"></image>
						</view>
						<view class="text-play">
							<view class="item-text">{{item.vnote}}</view>
							<view class="item-play">{{item.vplayCount}}次播放</view>
						</view>
					</view>
				</view>
			</view>
			</scroll-view>
			
		<!-- </view> -->
		<!-- 底部 -->
		<view class="footer">
			<input class="iconfont footer-inpuit"
				v-model="addComment.content"
				placeholder-style="font-size: 28rpx;color: #999999;"
				:placeholder='icon'/>
				<view class="iconfont send" @click="search">&#xe600;</view>
			<view class="icon-list">
				<view class="iconfont">&#xe663;</view>
				<view class="iconfont share" @click="iconShare">&#xe667;</view>
				<view class="iconfont">&#xe6bd;</view>
			</view>
		</view>
		<!-- 分享 -->
		<uni-popup  ref="popup" type="bottom">
			<view class="popup-main">
				<view class="title">分享到</view>
				<view class="img-list">
					<view v-for="(item,index) in shareList" :key="item.id" class="img-name-box" @click="clickSearc">
						<image class="img" :src="item.url"></image>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
				<view class="footer-btn">取消</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import msTabs from '@/components/ms-tabs.vue'
	import { $POST, $GET } from '@/network/api.js'
	import { dateDiff } from '@/network/date.js'
	export default {
			components:{ msTabs },
		data() {
			return {
				CountImgIndex:false,
				isAttenFrom: { // 是否关注的参
					followId: '',
					fansId: '',
				},
				shareList: [
					{ id: 7, name: "复制链接", url: '../../static/home/copylink.png'}
				],
				isAttenStatus: "", // 是否关注的状态
				attentionFrom: { // 关注参数
					fansAccount: '', // 关注者用户登录账号
					fansId: '', // 关注者用户id
					followAccount: '', // 被关注者用户登录账号
					followId: '', // 被关注者用户id
					followTime: new Date().getTime() // 关注时间
				},
				giveFrom: { // 点赞参数
					id: "", // 点赞目标id
					lightUp: '' ,// 点赞或取消点赞
					type: "1" // 评论或回复，1：评论，2：回复
				},
				addComment: { // 新增评论参数
					content: '', // 评论内容
					userId: '', // 用户id
					videoId: '' // 视屏id
				},
				userFrom: { // 个人数据
					url: '../../static/home/celebrity.jpeg', // 头像
					nick:'逆风', // 昵称
					title: '西班牙', // 标题
					frontStr: '', // 内容
					laterStr:''
				},
				fansCount: '', // 粉丝数量
				vpraiseCountImg: [
					{ imgUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', id: 1 },
					{ imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', id: 2 },
					{ imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', id: 3 },
					{ imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', id: 4 },
				], // 视频剧情图片数据
				videoPath: '', // 视频地址
				toView: '',
				icon: "\ue613  输入评论", // 评论输入框图标
				active:0, // 选项卡默认0
				commentFrom: { // 评论参数
					pageNum: 1, // 当前页
					pageSize: 10, // 当前页条数
					userId: '' // 用户id
				},
				commentArr: [], // 评价数据长度
				equalList: [
					{ vplayCount: 999, vnote:'这插件对视频存什么地方有要求吗？同一个视频不同的存法，存七牛的有封面图，存本地的就没封面图', fcoverUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', id: 1 },
					{ vplayCount: 199, vnote:'直接打开几次闪退了，还没不能在页面看，有什么用啊', fcoverUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', id: 2 },
					{ vplayCount: 1441, vnote:'app端智能播放一次啊 再点击重复播放的时候就没反应了', fcoverUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', id: 3 },
					{ vplayCount: 204, vnote:'作者，这个有支持APP吗 点击视频还是原生视频播放', fcoverUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', id: 4 },
				], // 相关视频数据
				commentList: [
					{ praseCount:10, content:'直接打开几次闪退了，还没不能在页面看，有什么用啊', createTime:'20219-30', nick:'真三', imgUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', id: 1 },
					{ praseCount:70, content:'这插件对视频存什么地方有要求吗？同一个视频不同的存法，存七牛的有封面图，存本地的就没封面图', createTime:'20219-30', nick:'李四', imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', id: 2 },
					{ praseCount:100, content:'作者，这个有支持APP吗 点击视频还是原生视频播放', createTime:'20219-30', nick:'王五', imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', id: 3 },
					{ praseCount:77, content:'app端智能播放一次啊 再点击重复播放的时候就没反应了', createTime:'20219-30', nick:'二麻子', imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', id: 4 },
					
				], // 我的评价数据
				tabList: [	{ title: "视频剧情", value: "conter-duction" }, { title: "视频评论", value: "comment" }, { title: "视频推荐", value: "equa" }],
				statuHeightBack: uni.getSystemInfoSync().statusBarHeight+14, // 状态栏高度
				statuHeight: uni.getSystemInfoSync().statusBarHeight+16 // 状态栏高度
			}
		},
		onLoad(options) {
			if(options) {
				this.videoPath = options.videoUrl // 视频列表传过来的视频地址
				let srt = "app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。导致不能正常覆盖原生组件。 虽然有cover-view组件但其能力受限，所以本示例巧用：视频关键帧图片与icon模拟video组件效果，点击后播放全屏播放视频的方案解决上述问题"
				this.userFrom.frontStr = srt.slice(0,srt.length/2) // 截取前面的内容
				this.userFrom.laterStr = srt.slice(srt.length/2,srt.length-1) // 截取后面的内容
			}
		},
		methods:{
			// 分享
			clickSearc(index) {
				const vm = this
					uni.setClipboardData({
					    data: 'https://s17.aconvert.com/convert/p3r68-cdx67/oc3u9-nd1he.mp4',
					    success: function () {
					      uni.showToast({	title:'复制成功',icon:'none' })
								 vm.$refs.popup.close()
					    }
					})
			},
			// 打开弹窗
			iconShare() {
				 this.$refs.popup.open()
			},
			// 取消关注
			cancelFollow() {
				$POST("/boke-user/user/cancelFollow",this.isAttenFrom).then(res => {
					if(res.code === "0000000") {
						this.isattention()
					}
				})
			},
			// 关注
			async attention() {
			 const res = await $POST("/boke-user/user/follow",this.attentionFrom)
			 if(res.code === "0000000") {
				 this.isattention()
			 }
			},
			// 点赞
			async clickGive(id,giveStatus) {
				const giveStatu = {
					commentId: id,
					commentStatus: giveStatus ? false : true
				}
				uni.setStorageSync('CommentStatus', giveStatu)
				this.giveFrom.id = id
				this.giveFrom.lightUp = giveStatus ? 0 : 1
				const res = await $POST("/boke-item/video/lightUp",this.giveFrom)
				if (res.code === "0000000") {
					this.getComment()
				}
			},
			// 发表评论
			async search() {
				const res = await $POST("/boke-item/video/addComment",this.addComment)
				if(res.code === "0000000") {
					this.addComment.content = '' // 清空评论
					this.getComment()
				}
			},
			// 详情接口
			async getDetail(id) {
				const res = await $POST('/boke-item/video/getVideoDetails',{videoId: id})
				this.userFrom.url = res.data.avartImg  // 头像赋值
				this.userFrom.nick = res.data.nick || ''// 昵称赋值
				this.userFrom.title = res.data.vtitle // 标题
				this.userFrom.vpraiseCount = res.data.vpraiseCount // 内容
				this.vpraiseCountImg = res.data.vrecommendImgList // 内容图片
				this.attentionFrom.followAccount = res.data.account // 详情账号赋值到关注参数
				this.attentionFrom.followId = res.data.userId // 详情id赋值到关注参数
				this.isAttenFrom.followId = res.data.userId // 详情id赋值到查询关注参数
				this.isattention() // 是否关注方法
			},
			// 点击加载更多
			clickLoad() {
				this.commentFrom.pageNum += 1
				this.getComment()
			},
			// 获取评论列表
			async getComment() {
				const res = await $POST("/boke-item/user/myCommentList",this.commentFrom)
				if (res.data.length) {
					this.commentArr= []
					this.commentArr = res.data
					this.commentArr.forEach(item => {
						item.createTime = dateDiff(item.createTime) // 转换时间
					})
					this.commentList = [...this.commentList,...this.commentArr]
				}
			},
			// 获取相关推荐
			// 获取视频列表
			async getVideo() {
				const res = await $POST('/boke-item/file/getVideoFile',{channelId: 2,isVip: 0,})
				if(res.data.length) {
					this.equalList = res.data
				}
			},
			// 相关推荐跳转详情
			// 跳视频详情
			 videoDetail(url,id) {
				uni.navigateTo({
					url: '/pages/home/video_details?videoUrl='+url+'&vid='+id
				})
			 },
			 // 查询是否有关注
			async isattention() {
				const res = await $POST("/boke-user/user/followRelationship",this.isAttenFrom)
				if(res.code === "0000000") {
					this.isAttenStatus = res.data.follow
				}
			 },
			// 获取粉丝数量
			async getFans(id) {
				const res = await $POST("/boke-user/user/getFansCount",{followId: id})
				this.fansCount = res
			},
			// tab事件
			tabsClick(e,item) {
				this.toView = item.value
			},
			// 返回上一页
			imgBack() {
			uni.switchTab({
				url: "/pages/home/index"
			});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contont{
	
	}
	.header-video{
		width: 100%;
		height: 478rpx;
		position: relative;
		video{
			width: 100% !important;
			height: 100% !important;
		}
		/deep/ .uni-video-cover-duration{
			display: none !important;
		}
		.controls-back{
			width: 17rpx;
			height: 33rpx;
			position: absolute;
			top:0;
			left: 18rpx;
		}
		.controls-share{
			width: 27rpx;
			height: 24rpx;
			position: absolute;
			top:0;
			right: 32rpx;
		}
	}
	// 选项卡
	.tabs-box{
		padding-top: 34rpx;
		padding-left: 21rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 3rpx 7rpx 0px rgba(159, 102, 233, 0.35);
		/deep/ .tab{
			height: 76rpx !important;
			font-size: 32rpx !important;
			font-family: PingFang SC !important;
			font-weight: 400 !important;
		}
		.tab__item--active{
			font-weight: 400 !important;
		}
	}
	// 主体内容
	.main-scroller{
		height: calc(100vh - 680rpx);
		margin-bottom:100rpx;
		// 视频剧情
		.conter-duction-header{
			.content-duction{
				padding: 40rpx 0 26rpx 0;
				border-bottom: 1px solid #F2F2F2;
				.content-duction-title{
					padding: 0 0 22rpx 30rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.item-conten{
					padding: 0 30rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					color: #666666;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
			.attention-bean{
				padding: 27rpx 22rpx 22rpx 31rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item-user{
					display: flex;
					align-items: center;
					.img-box{
						width: 69rpx;
						height: 69rpx;
						margin-right: 20rpx;
						.img{
							width: 100%;
							height: 100%;
							margin-right: 20rpx;
							border-radius: 50%;
						}
					}
					.name-bean{
						width: 300rpx;
						.user-name{
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							margin-bottom: 15rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
						.bean{
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
				.attention-ta{
					// background: #9F66E9;
					// border-radius: 20px;
					padding: 11rpx 22rpx;
					background: #9F66E9;
					border-radius: 25rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
		// 影视图片与描述
		.films-img-describe{
			padding: 25rpx 47rpx 25rpx 40rpx;
			.title-icon{
				display: flex;
				align-items: center;
				margin-bottom:24rpx;
				.icon{
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #333333;
					margin-right: 8rpx;
				}
				.item-text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				
				}
			}
			.title-contont-img{
				// height: 583rpx;
				overflow: hidden;
				line-height: 45rpx;

				.title-contont{
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #666666;
				
				}
				.img-box{
					display: flex;
					flex-direction: column;
				.img{
					width: 638rpx;
					height: 360rpx;
					border-radius: 5rpx;
					
				}
			}
			}
			.unfold{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #A912E7;
				text-align: right;
				margin-top:20rpx;
			}
		}
		// 全部评论
		.discuss-title{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding: 27rpx 0 35rpx 40rpx;
			border-bottom: 1rpx solid #cccccc;
		}
		.all-comment-list{
			padding: 0 20rpx 40rpx 20rpx;
			.comment-box:last-of-type {
				border: none !important;
			}
			.comment-box{
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #cccccc;
				.user-portrait-name{
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.item-img-name{
						display: flex;
						align-items: center;
						.img{
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
						.user-name{
							width: 300rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							margin-left: 20rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}
					.time{
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
				.comment-text{
					// width: 200rpx;
					padding-left: 100rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					text-align: justify;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
				.icon-num{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding-top: 10rpx;
					.iconfont{
						font-size: 48rpx;
						color: #999999;
						text-align: right;
					}
					.num{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}
			}
		}
		.load-more{
			padding-bottom:30rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #A912E7;
		}
		// 相关推荐
		.equal-induce{
			padding: 0 24rpx 54rpx 24rpx;
			.equal-title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 30rpx 0 30rpx 16rpx;
			}
			.img-text-play{
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.equal-img{
					width: 220rpx;
					height: 115rpx;
					border-radius: 4rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 4rpx;
					}
				}
				.text-play{
					width: 444rpx;
					margin-left: 30rpx;
					.item-text{
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #333333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.item-play{
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						text-align: right;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
	// 底部
	.footer{
		width: 100%;
		height: 100rpx;
		padding: 0 50rpx 0 27rpx;
		box-shadow: 0px -4rpx 10rpx 0px rgba(0, 0, 0, 0.04);
		position: fixed;
		bottom: 0;
		left: 0;
		margin-bottom: env(safe-area-inset-bottom);
		background: #FFFFFF;
		line-height: 66rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.footer-inpuit{
			width: 333rpx;
			height: 66rpx;
			line-height: 66rpx;
			background: #F2F2F2;
			border-radius: 33rpx;
			text-align: center;
		}
		.send{
			font-size: 48rpx;
			padding-right:30rpx;
			color: #1AA034;
			border-right: 1rpx solid #EEEEEE;
		}
		.icon-list{
			display: flex;
			align-items: center;
			.iconfont{
				color: #666666;
				font-size: 48rpx;
			}
			.share{
				padding: 0 30rpx;
			}
		}
	}
	// 弹窗
	.popup-main{
		width: 100%;
		// height: 524rpx;
		background: #FFFFFF;
		padding: 0 40rpx;
		box-sizing: border-box;
		// margin-bottom: env(safe-area-inset-bottom);
		padding-bottom: 30rpx;
		.title{
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #828282;
			padding: 20rpx 0;
			text-align: center;
		}
		.img-list{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-bottom: 30rpx;
			.img-name-box:nth-child(4n) {
				margin-right:0 !important;
			}
			.img-name-box{
				margin: 0 90rpx 30rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.img{
					width: 82rpx;
					height: 82rpx;
				}
				.name{
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #828282;
					margin-top: 18rpx;
				}
			}
		}
		.footer-btn{
			width: 100%;
			height: 91rpx;
			background: linear-gradient(90deg, #B83DF1, #852CAE);
			border-radius: 10rpx;
			line-height: 91rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
			box-sizing: border-box;
			// margin-top: 30rpx;
			margin-bottom:  env(safe-area-inset-bottom);
		}
	}
	
</style>
